<template>
<div class='wrapper'>
    <swiper :options="swiperOption" v-if='showswiper'>
        <swiper-slide v-for='item of list' :key='item.id'><img class="swiper-img" :src="item.imgUrl" ></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default{
  name: 'HomeSwiper',
  props:{
        list:Array
  },
  data: function(){
        return {swiperOption: {autoplay: 3000,
                               pagination:'.swiper-pagination',
                               loop: true
                }

        }
    },
  computed:{
      showswiper:function(){
          return this.list.length
      }
  }
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
    overflow hidden
    width:100%
    height:0
    padding-bottom :30%
    background-color :#eee
    .swiper-img
        width:100%
</style>